
<template>
  <div class="play1 base-background-img">
    <ul class="ul-item-content">
      <li class="li-item-content" v-for='(item, index) in tabs' :key="index" :class="{'active': item.isSelected}" @click="swiper(item)">
        <img :src="item.img" alt="">
      </li>
    </ul>
    <c-pdf @closePdf="closePdf" v-if="isshowpdf" :info="info" :infourl="pdfurl"></c-pdf>
  </div>
</template>

<script>
  import STATICPATH from '../../config.js'
  export default {
    name: 'play2',
    data () {
      return {
        isshowpdf: false,
        ishsowvideo: false,
        info: '',
        infourl: '',
        tabs: [{
          img: 'static/hohoplay/2/1.png',
          url: 'static/hohoplay/pdf/2/课件 - 小丑走钢丝.pdf',
          data: [{
            isSelected: 1,
            name: '小丑走钢丝1',
            url: STATICPATH + '/hohoplay/video/2/K-L2-01/小丑走钢丝1.mp4'
          }, {
            isSelected: 0,
            name: '小丑走钢丝2',
            url: STATICPATH + '/hohoplay/video/2/K-L2-01/小丑走钢丝2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/2/2.png',
          url: 'static/hohoplay/pdf/2/课件 - 摇摆木马.pdf',
          data: [{
            isSelected: 1,
            name: '摇摆木马',
            url: STATICPATH + '/hohoplay/video/2/K-L2-02/摇摆木马.mp4'
          }, {
            isSelected: 0,
            name: '摇摆木马2',
            url: STATICPATH + '/hohoplay/video/2/K-L2-02/摇摆木马2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/2/3.png',
          url: 'static/hohoplay/pdf/2/课件 - 3D眼镜.pdf',
          data: [{
            isSelected: 1,
            name: '3D眼镜1',
            url: STATICPATH + '/hohoplay/video/2/K-L2-03/3D眼镜1.mp4'
          }, {
            isSelected: 0,
            name: '3D眼镜2',
            url: STATICPATH + '/hohoplay/video/2/K-L2-03/3D眼镜2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/2/4.png',
          url: 'static/hohoplay/pdf/2/课件 - 变形观测仪.pdf',
          data: [{
            isSelected: 1,
            name: '凹凸镜',
            url: STATICPATH + '/hohoplay/video/2/K-L2-04/凹凸镜.mp4'
          }, {
            isSelected: 0,
            name: '凹凸镜2',
            url: STATICPATH + '/hohoplay/video/2/K-L2-04/凹凸镜2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/2/5.png',
          url: 'static/hohoplay/pdf/2/课件 - 散开的颜色.pdf',
          data: [{
            isSelected: 1,
            name: '散开的颜色',
            url: STATICPATH + '/hohoplay/video/2/K-L2-05/散开的颜色.mp4'
          }, {
            isSelected: 0,
            name: '毛细现象',
            url: STATICPATH + '/hohoplay/video/2/K-L2-05/毛细现象.mp4'
          }]
        },
        {
          img: 'static/hohoplay/2/6.png',
          url: 'static/hohoplay/pdf/2/课件 - 印花手绢.pdf',
          data: [{
            isSelected: 1,
            name: '缎带染色',
            url: STATICPATH + '/hohoplay/video/2/K-L2-06/缎带染色.mp4'
          },
          {
            isSelected: 0,
            name: '散开的颜色',
            url: STATICPATH + '/hohoplay/video/2/K-L2-06/散开的颜色.mp4'
          }]
        },
        {
          img: 'static/hohoplay/2/7.png',
          url: 'static/hohoplay/pdf/2/课件 - 神奇的指纹.pdf',
          data: [{
            isSelected: 1,
            name: '神奇的指纹',
            url: STATICPATH + '/hohoplay/video/2/K-L2-07/神奇的指纹.mp4'
          }, {
            isSelected: 0,
            name: '1指纹识别2',
            url: STATICPATH + '/hohoplay/video/2/K-L2-07/1指纹识别2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/2/8.png',
          url: 'static/hohoplay/pdf/2/课件 - 熄灭的蜡烛.pdf',
          data: [{
            isSelected: 1,
            name: '点燃蜡烛',
            url: STATICPATH + '/hohoplay/video/2/K-L2-08/点燃蜡烛.mp4'
          }, {
            isSelected: 0,
            name: '灭火方法',
            url: STATICPATH + '/hohoplay/video/2/K-L2-08/灭火方法.mp4'
          }]
        },
        {
          img: 'static/hohoplay/2/9.png',
          url: 'static/hohoplay/pdf/2/课件 - 风轮转转转.pdf',
          data: [{
            isSelected: 1,
            name: '风轮转转转',
            url: STATICPATH + '/hohoplay/video/2/K-L2-09/风轮转转转.mp4'
          }]
        },
        {
          img: 'static/hohoplay/2/10.png',
          url: 'static/hohoplay/pdf/2/课件 - 回旋飞机.pdf',
          data: [{
            isSelected: 1,
            name: '回旋飞机1',
            url: STATICPATH + '/hohoplay/video/2/K-L2-10/回旋飞机1.mp4'
          }, {
            isSelected: 0,
            name: '飞机原理2',
            url: STATICPATH + '/hohoplay/video/2/K-L2-10/飞机原理2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/2/11.png',
          url: 'static/hohoplay/pdf/2/课件 - 青蛙的舌头.pdf',
          data: [{
            isSelected: 1,
            name: '青蛙的舌头',
            url: STATICPATH + '/hohoplay/video/2/K-L2-11/青蛙的舌头.mp4'
          }, {
            isSelected: 0,
            name: '青蛙的舌头2',
            url: STATICPATH + '/hohoplay/video/2/K-L2-11/青蛙的舌头2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/2/12.png',
          url: 'static/hohoplay/pdf/2/课件 - 3D昆虫.pdf',
          data: [{
            isSelected: 1,
            name: '3D昆虫1',
            url: STATICPATH + '/hohoplay/video/2/K-L2-12/3D昆虫1.mp4'
          }, {
            isSelected: 0,
            name: '3D昆虫2',
            url: STATICPATH + '/hohoplay/video/2/K-L2-12/3D昆虫2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/2/13.png',
          url: 'static/hohoplay/pdf/2/课件 - 小羊过桥.pdf',
          data: [{
            isSelected: 1,
            name: '小羊过桥1',
            url: STATICPATH + '/hohoplay/video/2/K-L2-13/小羊过桥1.mp4'
          }, {
            isSelected: 0,
            name: '小羊过桥2',
            url: STATICPATH + '/hohoplay/video/2/K-L2-13/小羊过桥2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/2/14.png',
          url: 'static/hohoplay/pdf/2/课件 - 乌鸦喝水.pdf',
          data: [{
            isSelected: 1,
            name: '罗密欧吃虫子1',
            url: STATICPATH + '/hohoplay/video/2/K-L2-14/罗密欧吃虫子1.mp4'
          }, {
            isSelected: 0,
            name: '乌鸦喝水',
            url: STATICPATH + '/hohoplay/video/2/K-L2-14/乌鸦喝水.mp4'
          }, {
            isSelected: 0,
            name: '乌鸦喝水2',
            url: STATICPATH + '/hohoplay/video/2/K-L2-14/乌鸦喝水2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/2/15.png',
          url: 'static/hohoplay/pdf/2/课件 - 天线宝宝的耳朵.pdf',
          data: [{
            isSelected: 1,
            name: '天线宝宝',
            url: STATICPATH + '/hohoplay/video/2/K-L2-15/1天线宝宝.mp4'
          }, {
            isSelected: 0,
            name: '天线宝宝的耳朵2',
            url: STATICPATH + '/hohoplay/video/2/K-L2-15/天线宝宝的耳朵2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/2/16.png',
          url: 'static/hohoplay/pdf/2/课件 - 自制小手电.pdf',
          data: [{
            isSelected: 1,
            name: '灯泡亮起来',
            url: STATICPATH + '/hohoplay/video/2/K-L2-16/灯泡亮起来.mp4'
          }, {
            isSelected: 0,
            name: '灯泡亮起来2',
            url: STATICPATH + '/hohoplay/video/2/K-L2-16/灯泡亮起来2.mp4'
          }]
        }]
      }
    },
    methods: {
      swiper: function (item) {
        console.log(item)
        this.info = item.data
        this.pdfurl = item.url
        this.isshowpdf = true
      },
      closePdf: function () {
        this.isshowpdf = false
      }
    }
  }
</script>

<style scoped>
.play1 > div {
  position: absolute; 
}
.ul-item-content {
  margin: 0;
  padding: 0;
  list-style-type: none;
  z-index: 10;
  top: 230px;
  left: 190px;
  width: 910px;
  height: 35px;
  position: absolute;
}
.li-item-content {
  cursor: pointer;
  float: left;
  margin: 15px 9px;
  position: initial;
}
</style>
